<template>
	<view class="container">
		<!-- 顶部操作栏 -->
		<view class="header-card">
			<view class="header-content">
				<!-- 学科选择器和评分主题输入 -->
				<view class="score-controls">
					<picker mode="selector" :range="subjects" @change="changeSubject">
						<view class="subject-picker">
							<text class="subject-text">{{selectedSubject || '选择学科'}}</text>
							<uni-icons type="arrowdown" size="20" color="#fff"></uni-icons>
						</view>
					</picker>

					<view class="score-input">
						<input v-model="newScoreTitle" placeholder="输入评分主题" class="score-input-field" />
						<input v-model="newScoreValue" type="number" placeholder="分数" class="score-value-input" />
						<button class="add-btn" @click="addScoreTitle">
							<text>添加</text>
							<uni-icons type="plus" size="16" color="#fff"></uni-icons>
						</button>
					</view>
				</view>

				<!-- 评分主题标签 -->
				<view class="score-tags-container">
					<scroll-view scroll-x class="score-tags-scroll">
						<view class="score-tags">
							<view v-for="(title, index) in scoreTitles" :key="index" class="score-tag" :class="{
                      active: selectedScoreTitle.title === title.title,
                      positive: title.value > 0,
                      negative: title.value < 0
                    }" @click="selectScoreTitle(title)">
								<text>{{title.title}}</text>
								<text class="score-value">{{title.value > 0 ? '+' : ''}}{{title.value}}</text>
								<view class="remove-icon" @click.stop="removeScoreTitle(index, $event)">
									<uni-icons type="close" size="14" color="currentColor"></uni-icons>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 视图切换和已选择学生信息 -->
		<view class="view-controls">
			<view class="view-switcher">
				<text class="view-label">视图模式:</text>
				<button :class="['view-btn', {active: viewMode === 'grid'}]" @click="switchView('grid')">
					<uni-icons type="grid" size="18"></uni-icons>
					<text>网格</text>
				</button>
				<button :class="['view-btn', {active: viewMode === 'list'}]" @click="switchView('list')">
					<uni-icons type="list" size="18"></uni-icons>
					<text>列表</text>
				</button>
			</view>

			<view class="selected-info" v-if="selectedStudents.length > 0">
				<text class="selected-count">已选 {{selectedStudents.length}} 人</text>
				<button class="clear-btn" @click="cancelSelection">
					<uni-icons type="trash" size="16"></uni-icons>
					<text>清空</text>
				</button>
			</view>
		</view>

		<!-- 已评分学生标签 -->
		<view class="scored-tags" v-if="filteredScoredStudents.length > 0">
			<text class="scored-label">今日已评分:</text>
			<scroll-view scroll-x class="scored-list">
				<view class="scored-students">
					<view v-for="student in filteredScoredStudents" :key="student.studentId" class="scored-tag">
						{{student.studentName}} ({{student.marks > 0 ? '+' : ''}}{{student.marks}})
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 学生列表 - 网格视图 -->
		<scroll-view class="student-grid-container" scroll-y v-if="viewMode === 'grid'">
			<view class="student-grid">
				<view v-for="(student, index) in students" :key="student.userId" class="student-card"
					:class="{selected: selectedStudents.includes(student.userId)}">
					<view class="student-info" @click="toggleSelectStudent(student.userId)">
						<image :src="getStudentAvatar(student.aver)" class="avatar"></image>
						<view class="student-details">
							<text class="name">{{student.studentName}}</text>
							<text class="grade">{{student.grade}}</text>

							<!-- 显示今日加分情况 -->
							<view class="score-summary" v-if="todayScores[student.userId]">
								<view class="total-score" :class="{
                  'positive': todayScores[student.userId].total > 0,
                  'negative': todayScores[student.userId].total < 0
                }">
									今日总分:
									{{todayScores[student.userId].total > 0 ? '+' : ''}}{{todayScores[student.userId].total}}
								</view>
								<view class="score-details">
									<view v-for="(record, idx) in todayScores[student.userId].records" :key="idx"
										class="score-tag" :class="{
                          'positive': record.role === 1,
                          'negative': record.role === 0
                        }">
										{{record.scoreName}}: {{record.role === 1 ? '+' : '-'}}{{record.score}}
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 分数选择器 -->
					<view class="score-selector" v-if="selectedStudents.includes(student.userId)">
						<view class="score-slider-container">
							<slider class="score-slider" :value="studentScores[student.userId] || 0" min="-5" max="5"
								step="1" @change="handleScoreChange($event, student.userId)"
								@changing="handleScoreChanging($event, student.userId)" />
							<view class="score-indicator"
								:style="{left: `${(studentScores[student.userId] || 0) * 10 + 50}%`}">
								<view class="indicator-value" :class="{
                  'positive': (studentScores[student.userId] || 0) > 0,
                  'negative': (studentScores[student.userId] || 0) < 0
                }">
									{{(studentScores[student.userId] || 0) > 0 ? '+' : ''}}{{studentScores[student.userId] || 0}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 学生列表 - 列表视图 -->
		<scroll-view class="student-list-container" scroll-y v-if="viewMode === 'list'">
			<view class="student-list">
				<view v-for="(student, index) in students" :key="student.userId" class="list-item"
					:class="{selected: selectedStudents.includes(student.userId)}">
					<view class="list-item-content" @click="toggleSelectStudent(student.userId)">
						<image :src="getStudentAvatar(student.aver)" class="list-avatar"></image>
						<view class="list-details">
							<view class="list-name-row">
								<text class="list-name">{{student.studentName}}</text>
								<text class="list-grade">{{student.grade}}</text>
							</view>

							<!-- 显示今日加分情况 -->
							<view class="list-score-summary" v-if="todayScores[student.userId]">
								<view class="list-total-score" :class="{
                  'positive': todayScores[student.userId].total > 0,
                  'negative': todayScores[student.userId].total < 0
                }">
									{{todayScores[student.userId].total > 0 ? '+' : ''}}{{todayScores[student.userId].total}}
								</view>
								<view class="list-score-details">
									<view v-for="(record, idx) in todayScores[student.userId].records" :key="idx"
										class="list-score-tag" :class="{
                          'positive': record.role === 1,
                          'negative': record.role === 0
                        }">
										{{record.scoreName}}: {{record.role === 1 ? '+' : '-'}}{{record.score}}
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 分数选择器 -->
					<view class="list-score-selector" v-if="selectedStudents.includes(student.userId)">
						<view class="list-score-slider-container">
							<slider class="list-score-slider" :value="studentScores[student.userId] || 0" min="-5"
								max="5" step="1" @change="handleScoreChange($event, student.userId)"
								@changing="handleScoreChanging($event, student.userId)" />
							<view class="list-score-indicator"
								:style="{left: `${(studentScores[student.userId] || 0) * 10 + 50}%`}">
								<view class="list-indicator-value" :class="{
                  'positive': (studentScores[student.userId] || 0) > 0,
                  'negative': (studentScores[student.userId] || 0) < 0
                }">
									{{(studentScores[student.userId] || 0) > 0 ? '+' : ''}}{{studentScores[student.userId] || 0}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作按钮 -->
		<view class="action-bar">
			<button class="action-btn cancel" @click="cancelSelection">
				<uni-icons type="close" size="18"></uni-icons>
				<text>取消</text>
			</button>
			<button class="action-btn confirm" @click="confirmScore">
				<uni-icons type="checkmark" size="18"></uni-icons>
				<text>确认评分</text>
			</button>
		</view>
	</view>
</template>
<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				grade: '二年级',
				students: [],
				selectedStudents: [],
				subjects: [],
				selectedSubject: '语文',
				currentSubject: '语文',
				scoreRecords: [],
				todayScores: {},
				scoreTitles: [{
						title: '老师可以自定义成绩和分数，支持保存',
						value: 2
					},
					{
						title: '完成作业',
						value: 3
					},
					{
						title: '成绩测试',
						value: 5
					},
					{
						title: '打扫卫生',
						value: 2
					}
				],
				selectedScoreTitle: {
					title: '课堂表现',
					value: 2
				},
				newScoreTitle: '',
				newScoreValue: '',
				studentScores: {},
				scoredStudents: [],
				scoredMap: {},
				sliding: false,
				teacher: {},
				scoreTitlesStorageKey: '',
				viewMode: 'grid' // 新增：视图模式，默认为网格
			}
		},
		computed: {
			filteredScoredStudents() {
				if (!this.currentSubject) return [];
				return this.scoredStudents.filter(student =>
					student.subject === this.currentSubject
				);
			},
		},
		onLoad(options) {
			uni.getStorage({
				key: "teacher",
				success: (res) => {
					this.teacher = res.data;
				}
			});
			this.grade = options.grade;
			this.scoreTitlesStorageKey = 'scoreTitles_' + this.grade;
			this.fetchStudents(this.grade);
			this.fetchTeacherSubjects();
			this.loadScoreTitlesFromStorage();

			// 尝试从缓存加载视图模式
			try {
				const savedViewMode = uni.getStorageSync('viewMode');
				if (savedViewMode) {
					this.viewMode = savedViewMode;
				}
			} catch (e) {
				console.error('加载视图模式失败', e);
			}
		},
		methods: {
			getStudentAvatar(aver) {
				if (!aver) {
					return '/static/aver1.jpg'; // 默认头像路径
				}
				return `${globalVariable}/get/${aver}`; // 拼接服务器头像路径
			},
			// 切换视图模式
			switchView(mode) {
				this.viewMode = mode;
				// 保存到本地缓存
				try {
					uni.setStorageSync('viewMode', mode);
				} catch (e) {
					console.error('保存视图模式失败', e);
				}
			},

			// 加载缓存的评分主题
			loadScoreTitlesFromStorage() {
				try {
					const savedTitles = uni.getStorageSync(this.scoreTitlesStorageKey);
					if (savedTitles && savedTitles.length > 0) {
						this.scoreTitles = savedTitles;
						this.selectedScoreTitle = this.scoreTitles[0];
					}
				} catch (e) {
					console.error('加载评分主题缓存失败', e);
				}
			},

			// 保存评分主题到缓存
			saveScoreTitlesToStorage() {
				try {
					uni.setStorageSync(this.scoreTitlesStorageKey, this.scoreTitles);
				} catch (e) {
					console.error('保存评分主题缓存失败', e);
				}
			},

			selectScoreTitle(title) {
				this.selectedScoreTitle = title;
				// 为所有已选择的学生应用这个主题的分数
				this.selectedStudents.forEach(studentId => {
					this.$set(this.studentScores, studentId, title.value);
				});
			},

			getStudentName(studentId) {
				const student = this.students.find(s => s.userId === studentId);
				return student ? student.studentName : '';
			},

			fetchTeacherSubjects() {
				uni.showLoading({
					title: '加载中...'
				});
				let that = this;
				uni.request({
					url: `${globalVariable}/getTeacherSubject?grade=${this.grade}&teacherId=${that.teacher.teacherId}`,
					success: (res) => {
						uni.hideLoading();
						if (res.data.status === 1) {
							this.subjects = res.data.data.map(item => item.subject);
							if (this.subjects.length > 0) {
								this.selectedSubject = this.subjects[0];
								this.currentSubject = this.subjects[0];
								that.fetchTodayScores();
							}
						} else {
							uni.showToast({
								title: res.data.message || '获取学科失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},

			fetchStudents(grade) {
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: globalVariable + "/getStudentsByGrade?grade=" + grade,
					success: (res) => {
						let info = res.data;
						this.students = info.data;
						this.students.forEach(student => {
							this.$set(this.studentScores, student.userId, 0);
						});
						uni.hideLoading();
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					}
				});
			},

			fetchTodayScores() {
				const today = new Date().toISOString().split('T')[0];
				uni.request({
					url: `${globalVariable}/getScoresByGradeAndTime`,
					method: 'GET',
					data: {
						grade: this.grade,
						time: today
					},
					success: (res) => {
						if (res.data.status === 1) {
							this.scoreRecords = res.data.data;
							this.processScoreRecords();
						} else {
							uni.showToast({
								title: res.data.message || '获取数据失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},

			processScoreRecords() {
				this.todayScores = {};
				this.scoreRecords.forEach(record => {
					if (!this.todayScores[record.studentId]) {
						this.todayScores[record.studentId] = {
							total: 0,
							records: []
						};
					}
					const scoreValue = record.role === 1 ? record.score : -record.score;
					this.todayScores[record.studentId].total += scoreValue;
					this.todayScores[record.studentId].records.push(record);
				});
			},

			updateScoredMap() {
				const map = {};
				this.scoredStudents.forEach(item => {
					if (!map[item.studentId]) {
						map[item.studentId] = item;
					} else {
						map[item.studentId].marks += item.marks;
					}
				});
				this.scoredMap = map;
			},

			changeSubject(e) {
				this.selectedSubject = this.subjects[e.detail.value];
				this.currentSubject = this.selectedSubject;
				this.fetchTodayScores();
			},

			addScoreTitle() {
				if (this.newScoreTitle.trim() && !isNaN(this.newScoreValue)) {
					const newTitle = {
						title: this.newScoreTitle.trim(),
						value: parseInt(this.newScoreValue)
					};
					this.scoreTitles.unshift(newTitle);
					this.selectedScoreTitle = newTitle;
					this.newScoreTitle = '';
					this.newScoreValue = '';

					// 自动更新已选学生的分数
					this.selectedStudents.forEach(studentId => {
						this.$set(this.studentScores, studentId, newTitle.value);
					});

					// 保存到本地缓存
					this.saveScoreTitlesToStorage();

					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
			},

			removeScoreTitle(index, event) {
				if (event) event.stopPropagation();

				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个评分主题吗?',
					success: (res) => {
						if (res.confirm) {
							const isRemovingSelected = this.scoreTitles[index].title === this
								.selectedScoreTitle.title;
							this.scoreTitles.splice(index, 1);

							if (isRemovingSelected && this.scoreTitles.length > 0) {
								this.selectedScoreTitle = this.scoreTitles[0];
							}

							// 保存到本地缓存
							this.saveScoreTitlesToStorage();

							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},

			handleScoreChange(e, studentId) {
				this.sliding = false;
				this.$set(this.studentScores, studentId, e.detail.value);
			},

			handleScoreChanging(e, studentId) {
				this.sliding = true;
				this.$set(this.studentScores, studentId, e.detail.value);
			},

			toggleSelectStudent(studentId) {
				const index = this.selectedStudents.indexOf(studentId);
				if (index === -1) {
					this.selectedStudents.push(studentId);
					this.$set(this.studentScores, studentId, this.selectedScoreTitle.value);
				} else {
					this.selectedStudents.splice(index, 1);
				}
			},

			cancelSelection() {
				this.selectedStudents = [];
			},

			confirmScore() {
				if (this.selectedStudents.length === 0) {
					uni.showToast({
						title: '请选择学生',
						icon: 'none'
					});
					return;
				}

				const requestData = this.selectedStudents.map(studentId => {
					const student = this.students.find(s => s.userId === studentId);
					return {
						studentId: studentId,
						studentName: student.studentName,
						score: Math.abs(this.studentScores[studentId] || 0),
						scoreName: this.selectedScoreTitle.title,
						role: (this.studentScores[studentId] || 0) > 0 ? 1 : 0,
						scoreType: this.currentSubject,
						teacherId: this.teacher.teacherId,
						teacherName: this.teacher.name,
						grade: this.grade,
						time: "当前时间"
					};
				});

				uni.showLoading({
					title: '提交中...'
				});
				uni.request({
					url: `${globalVariable}/updateScoreS`,
					method: 'POST',
					data: requestData,
					success: (res) => {
						uni.hideLoading();
						if (res.data.status === 1) {
							uni.showToast({
								title: '评分成功',
								icon: 'success'
							});
							this.selectedStudents = [];
							this.fetchTodayScores();
						} else {
							uni.showToast({
								title: res.data.message || '提交失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	/* 基础样式 */
	.container {
		padding: 20rpx;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
	}

	/* 毛玻璃卡片基础样式 */
	.glass-card {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.4);
		transition: all 0.3s ease;
	}

	/* 顶部操作栏 */
	.header-card {
		@extend .glass-card;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.header-content {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
		}
	}

	.score-controls {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.subject-picker {
			// width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 30rpx;
			background: linear-gradient(135deg, #4d90fe 0%, #3a7bd5 100%);
			border-radius: 48rpx;
			box-shadow: 0 4rpx 12rpx rgba(77, 144, 254, 0.3);

			.subject-text {
				font-size: 32rpx;
				font-weight: 500;
				color: white;
				margin-right: 10rpx;
			}
		}

		.score-input {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 48rpx;
			padding: 0 20rpx;
			height: 90rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.score-input-field {
				flex: 1;
				height: 100%;
				padding: 0 20rpx;
				font-size: 30rpx;
				color: #333;
			}

			.score-value-input {
				width: 120rpx;
				height: 100%;
				padding: 0 20rpx;
				font-size: 30rpx;
				color: #333;
				text-align: center;
				border-left: 1rpx solid #eee;
				border-right: 1rpx solid #eee;
			}

			.add-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #10b981 0%, #059669 100%);
				color: white;
				border-radius: 40rpx;
				padding: 0 30rpx;
				height: 70rpx;
				font-size: 28rpx;
				margin-left: 10rpx;
				box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);

				text {
					margin-right: 8rpx;
				}
			}
		}
	}

	/* 评分主题标签 */
	.score-tags-container {
		width: 100%;
		overflow: hidden;
	}

	.score-tags-scroll {
		white-space: nowrap;
		width: 100%;
		padding: 10rpx 0;
	}

	.score-tags {
		display: inline-flex;
		gap: 20rpx;
		padding: 10rpx 20rpx;
	}

	.score-tag {
		display: inline-flex;
		align-items: center;
		padding: 22rpx 36rpx;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 48rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #555;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		margin: 8rpx 0;
		height: 70rpx;
		line-height: 1;

		&.active {
			background: linear-gradient(135deg, #4d90fe 0%, #3a7bd5 100%);
			color: white;
			box-shadow: 0 4rpx 12rpx rgba(77, 144, 254, 0.3);
			transform: scale(1.05);

			.score-value {
				color: white;
				opacity: 0.9;
			}

			.remove-icon {
				background: rgba(255, 255, 255, 0.2);
				color: white;
			}
		}

		.score-value {
			margin: 0 10rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.remove-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32rpx;
			height: 32rpx;
			margin-left: 12rpx;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0.1);
			color: inherit;
		}
	}

	/* 视图控制区域 */
	.view-controls {
		@extend .glass-card;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.view-switcher {
			display: flex;
			align-items: center;

			.view-label {
				font-size: 28rpx;
				color: #555;
				margin-right: 15rpx;
			}

			.view-btn {
				display: flex;
				align-items: center;
				padding: 12rpx 20rpx;
				background: rgba(255, 255, 255, 0.7);
				border-radius: 40rpx;
				font-size: 26rpx;
				color: #555;
				margin-right: 10rpx;
				transition: all 0.3s ease;
				border: none;

				&.active {
					background: linear-gradient(135deg, #4d90fe 0%, #3a7bd5 100%);
					color: white;
					box-shadow: 0 4rpx 12rpx rgba(77, 144, 254, 0.3);
				}

				uni-icons {
					margin-right: 8rpx;
				}
			}
		}

		.selected-info {
			display: flex;
			align-items: center;

			.selected-count {
				font-size: 28rpx;
				color: #4d90fe;
				margin-right: 15rpx;
			}

			.clear-btn {
				display: flex;
				align-items: center;
				padding: 12rpx 20rpx;
				background: rgba(239, 68, 68, 0.1);
				color: #ef4444;
				border-radius: 40rpx;
				font-size: 26rpx;
				border: none;

				uni-icons {
					margin-right: 8rpx;
				}
			}
		}
	}

	/* 已评分标签 */
	.scored-tags {
		@extend .glass-card;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.scored-label {
			font-size: 28rpx;
			color: #555;
			margin-bottom: 12rpx;
			display: block;
		}

		.scored-list {
			width: 100%;
			white-space: nowrap;
		}

		.scored-students {
			display: inline-flex;
			gap: 12rpx;
		}

		.scored-tag {
			padding: 12rpx 20rpx;
			background: rgba(77, 144, 254, 0.15);
			border-radius: 40rpx;
			font-size: 26rpx;
			color: #4d90fe;
			border: 1rpx solid rgba(77, 144, 254, 0.3);
		}
	}

	/* 网格视图样式 */
	.student-grid-container {
		height: calc(100vh - 560rpx);
		padding-bottom: 140rpx;
	}

	.student-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20rpx;
		padding: 0 10rpx;
	}

	.student-card {
		@extend .glass-card;
		width: calc(48% - 10rpx);
		padding: 20rpx;
		animation: fadeIn 0.5s ease forwards;
		box-sizing: border-box;

		&.selected {
			background: rgba(77, 144, 254, 0.15);
			border-color: rgba(77, 144, 254, 0.3);
			box-shadow: 0 8rpx 24rpx rgba(77, 144, 254, 0.1);
		}

		.student-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
				border: 2rpx solid rgba(255, 255, 255, 0.6);
				object-fit: cover;
			}

			.student-details {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 6rpx;
				width: 100%;
				text-align: center;

				.name {
					font-size: 30rpx;
					font-weight: 600;
					color: #1e293b;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 100%;
				}

				.grade {
					font-size: 24rpx;
					color: #64748b;
				}

				.score-summary {
					width: 100%;
					margin-top: 10rpx;

					.total-score {
						font-size: 24rpx;
						font-weight: bold;
						margin-bottom: 6rpx;
					}

					.score-details {
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						gap: 6rpx;
					}
				}
			}
		}

		.score-selector {
			margin-top: 16rpx;
			padding: 10rpx 0;

			.score-slider-container {
				position: relative;
				height: 50rpx;

				.score-slider {
					width: 100%;
					z-index: 1;
				}

				.score-indicator {
					position: absolute;
					top: -30rpx;
					transform: translateX(-50%);
					transition: left 0.2s ease-out;
					z-index: 2;

					.indicator-value {
						padding: 4rpx 12rpx;
						border-radius: 40rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: white;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}

	/* 列表视图样式 */
	.student-list-container {
		height: calc(100vh - 560rpx);
		padding-bottom: 140rpx;
	}

	.student-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 0 10rpx;
	}

	.list-item {
		@extend .glass-card;
		padding: 20rpx;
		animation: fadeIn 0.5s ease forwards;

		&.selected {
			background: rgba(77, 144, 254, 0.15);
			border-color: rgba(77, 144, 254, 0.3);
			box-shadow: 0 8rpx 24rpx rgba(77, 144, 254, 0.1);
		}

		.list-item-content {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.list-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
				border: 2rpx solid rgba(255, 255, 255, 0.6);
				object-fit: cover;
			}

			.list-details {
				flex: 1;

				.list-name-row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8rpx;

					.list-name {
						font-size: 30rpx;
						font-weight: 600;
						color: #1e293b;
					}

					.list-grade {
						font-size: 24rpx;
						color: #64748b;
					}
				}

				.list-score-summary {
					.list-total-score {
						display: inline-block;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}

					.list-score-details {
						display: inline-flex;
						flex-wrap: wrap;
						gap: 6rpx;
					}
				}
			}
		}

		.list-score-selector {
			margin-top: 16rpx;
			padding: 10rpx 0;

			.list-score-slider-container {
				position: relative;
				height: 50rpx;

				.list-score-slider {
					width: 100%;
					z-index: 1;
				}

				.list-score-indicator {
					position: absolute;
					top: -30rpx;
					transform: translateX(-50%);
					transition: left 0.2s ease-out;
					z-index: 2;

					.list-indicator-value {
						padding: 4rpx 12rpx;
						border-radius: 40rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: white;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}

	/* 底部操作栏 */
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
		z-index: 10;

		.action-btn {
			flex: 1;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			transition: all 0.3s ease;

			&.cancel {
				background: rgba(0, 0, 0, 0.05);
				color: #64748b;
				margin-right: 15rpx;

				&:active {
					background: rgba(0, 0, 0, 0.1);
				}
			}

			&.confirm {
				background: linear-gradient(135deg, #4d90fe 0%, #3a7bd5 100%);
				color: white;
				margin-left: 15rpx;
				box-shadow: 0 4rpx 12rpx rgba(77, 144, 254, 0.3);

				&:active {
					transform: scale(0.98);
				}
			}

			uni-icons {
				margin-right: 8rpx;
			}
		}
	}

	/* 正负分数样式 */
	.positive {
		background: rgba(16, 185, 129, 0.1);
		color: #10b981;

		&.active {
			background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
			color: white !important;
		}
	}

	.negative {
		background: rgba(239, 68, 68, 0.1);
		color: #ef4444;

		&.active {
			background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
			color: white !important;
		}
	}

	/* 标签样式 */
	.score-tag,
	.list-score-tag {
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>